<template>
    <div class="header">
        <div class="header_line"></div>
        <div class="headerWrap">
            <div class="brand"><img src="@/static/img/logo.png" alt=""></div>
            <div class="left">
                <!-- 折叠按钮 -->
                <div class="logo" @click="goIndex"><span class="text">首页</span></div>
                <div class="logo" @click="$router.push({path:'/open'});active=2;" :class="active==2?'active':''"><span class="text">开放平台</span></div>
                <div class="logo more"   :class="active==3?'active':''"><span class="text">文档中心</span> <img src="@/static/img/sanji.png" alt="">
                    <transition name="el-zoom-in-center">
                        <div class="subWrap" v-show="showSubVar" style="background-color: rgb(42, 26, 69,0.9)">
                            <div class="column" v-for="(item,index) in subText" :class="[ index == 2 ? 'nonee' : '' ]">
                                <div class="icon"><img :src="item.img" alt=""></div>
                                <div class="headT">{{item.H}}</div>
                                <ul>
                                    <li v-for="(item2,index) in item.child" @click="goDetail(item2.url)" >{{item2.T}}</li>
                                </ul>
                            </div>
                        </div>
                    </transition>
                </div>
                <div class="logo" @click="active=4" :class="active==4?'active':''"><span class="text">成功案例</span></div>
            </div>
            <div class="header-right">
                <div class="header-user-con">
                    <!-- 消息中心 
                    <div class="btn-bell" v-if="username">
                        <el-tooltip effect="dark" :content="message?`有${message}条未读消息`:`消息中心`" placement="bottom">
                            <router-link to="/tabs">
                                <i class="el-icon-bell"></i>
                            </router-link>
                        </el-tooltip>
                        <span class="btn-bell-badge" v-if="message"></span>
                    </div>-->
                        <!-- 用户头像 -->
                        <div class="user-avator" v-if="username"><img :src="userImg"></div>
                        <!-- 用户名下拉菜单 -->
                        <el-dropdown class="user-name" trigger="click" @command="handleCommand" v-if="username">
                            <span class="el-dropdown-link">
                                {{username}} <i class="el-icon-caret-bottom"></i>
                            </span>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item divided  command="loginout">退出登录</el-dropdown-item>
                                <el-dropdown-item divided  command="editPass">修改密码</el-dropdown-item>
                                <el-dropdown-item divided  command="editImg">修改头像</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                        <div class="infoWrap" v-if="!username">
                            <div @click="goLogin('login')">登录</div>
                            <div @click="goLogin()">注册</div>
                        </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    import bus from '../common/bus';
    import $ from 'jquery'
    import _ from 'underscore'
    export default {
        data() {
            return {
                collapse: false,
                message: 2,
                showSubVar:false,
                img:'',
                subText:[
                    {
                        img:require('@/static/img/doc.png'),
                        H:'接入指南',
                        child:[
                            {
                                url:'/api/introduce',
                                T:'平台介绍'
                            },
                            {
                                url:'',
                                T:'接入方式概述'
                            },
                            {
                                url:'',
                                T:'Q&A'
                            },
                        ]
                    },
                    {
                        img:require('@/static/img/code.png'),
                        H:'开发说明',
                        child:[
                            {
                                url:'',
                                T:'开发流程'
                            },
                            {
                                url:'',
                                T:'代码规范'
                            },
                            {
                                url:'',
                                T:'H5开发'
                            },
                            {
                                url:'',
                                T:'Lua开发'
                            }
                        ]
                    },
                    {
                        img:require('@/static/img/dow.png'),
                        H:'文档&下载',
                        child:[
                            {
                                url:'',
                                T:'规范文档'
                            },
                            {
                                url:'',
                                T:'SDK下载'
                            },
                            {
                                url:'',
                                T:'接入方式概述'
                            },
                            {
                                url:'',
                                T:'测试工具类下载'
                            },
                        ]
                    }
                ]
            }
        },
        activated(){
          $(".more").mouseenter(()=>{
                var element=$('.more>img')
                element.css({
                    'transform':'rotate(360deg)'
                });
                this.showSubVar=true
          });
          $(".more").mouseleave(()=>{
                var element=$('.more>img')
                element.css({
                    'transform':'rotate(180deg)'
                });
                this.showSubVar=false
          });
          window.preview=()=>{
                var img = new Image();
                var file=$('#sendImage')[0].files[0]
                var reader=new FileReader()
                reader.onloadend=(e)=>{
                    var data = e.target.result;
                    img.src=data
                }
                reader.readAsDataURL(file)
                img.onload = ()=> {
                    var w = Math.min(130, img.width);
                    var h = img.height * (w / img.width);
                    var canvas = document.createElement('canvas');
                    var ctx = canvas.getContext('2d');

                    // 设置 canvas 的宽度和高度
                    canvas.width = w;
                    canvas.height = h;

                    // 把图片绘制到 canvas 中
                    ctx.drawImage(img, 0, 0, w, h);
                    // 取出 base64 格式数据
                    this.img = canvas.toDataURL(file.type);
                    $('#userImg').attr('src',this.img)
                }
            }
        },
        computed:{
            active:{
                get: function () {
                    return this.$store.getters.navActiveIndex?this.$store.getters.navActiveIndex:1
                },
                set: function () {
                }
            },
            username(){
                return this.$store.getters.username;
            },
            userImg(){
                return this.$store.getters.userImg
            }
        },
        methods:{
           editUserImage(action){
                if(action=='confirm'){
                    var data={token:localStorage.getItem('token'),head:this.img}
                    const loading = this.$loading({
                    lock: true,
                    text: '头像修改中',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.7)'
                  });
                    this.$http.post(this.$store.getters.serverIp+'edit_head',data).then((response)=>{
                        loading.close()
                        if(response.data.success){
                            this.$message.success({message:response.data.info,duration:1000});
                            localStorage.setItem('userImg',this.$store.getters.serverUserImgStaticIp+response.data.head)
                            this.$store.commit('setUserImg',this.$store.getters.serverUserImgStaticIp+response.data.head)
                        }else{
                            this.$message.error({message:response.data.info,duration:1000});
                        }
                    })
                }
                
            },
            goLogin(type){
                if(type){
                    this.$router.push({path:'/login?login=true'})
                }else{
                    this.$router.push({path:'/login'})
                }
            },
            // 用户名下拉菜单选择事件
            handleCommand(command) {
                if(command == 'loginout'){
                    var data={token:localStorage.getItem('token')}
                    this.$http.post(this.$store.getters.serverIp+'logout',data).then((response)=>{
                        if(response.data.success){
                            localStorage.removeItem('token')
                            localStorage.removeItem('username')
                            localStorage.removeItem('userImg')
                            this.$store.commit('setUserName','')
                            location='../index.html'
                            location.reload()
                        }
                    })
                }else if(command=='editPass'){
                    this.$alert(`<div><span>原密码：</span><div><input class="mybutton" id="oldpass" type="password"/></div></div>
                                 <div><span>新密码：</span><div><input class="mybutton" id="newpass" type="password"/></div></div>
                                 <div><span>确认密码：</span><div><input class="mybutton" id="repe_pass" type="password"/></div></div>
                        `, {
                      dangerouslyUseHTMLString: true,
                      callback:this.editPass,
                      title:'修改密码'
                    });
                }else if(command=='editImg'){
                    this.$alert(`<div><span>头像预览：</span></div>
                                <div class="imgWrapp"><img src=${this.userImg} alt="" id="userImg" class="logoImg"></div>
                              <div class="input-group"><div class="input-group-addonp" style="font-size: 13px;
        margin-top: 23px;"><span>选择头像</span><label style="position:relative;"><img style="cursor: pointer;
            vertical-align: sub;
            box-shadow: 0 2px 10px 4px rgba(0, 0, 0, 0.2);
            margin-left: 10px;" src="./static/img/image.jpg" title="send images" style="cursor:pointer;"><input id="sendImage" type="file" value="images" style="display:none;"  onchange="window.preview1()"></label></div></div>
                        `, {
                      dangerouslyUseHTMLString: true,
                      callback:this.editUserImage,
                      title:'修改头像'
                    });
                }
                setTimeout(()=>{
                    $('.el-message-box')[0].setAttribute("style","width: 266px !important;")
                    $('.el-button--primary')[0].setAttribute("style","background-color: rgb(58, 19, 90) !important;border-color: rgb(58, 19, 90) !important")
                    if($('.el-button--primary').length==2){
                        $('.el-button--primary')[1].setAttribute("style","background-color: rgb(58, 19, 90) !important;border-color: rgb(58, 19, 90) !important")
                    }
                })
            },
           editPass(action){
                if(action=='confirm'){
                    var data={old_pass:$('#oldpass').val(),new_pass:$('#newpass').val(),token:localStorage.getItem('token')}
                    if($('#repe_pass').val()!=data.new_pass){
                        this.$message.error({message:'两次密码输入不一致',duration:1000});
                        return
                    }
                    const loading = this.$loading({
                        lock: true,
                        text: '密码修改中',
                        spinner: 'el-icon-loading',
                        background: 'rgba(0, 0, 0, 0.7)'
                      });
                    this.$http.post(this.$store.getters.serverIp+'edit_pass',data).then((response)=>{
                        loading.close()
                        if(response.data.success){
                            this.$message.success({message:response.data.info,duration:1000});
                        }else{
                            this.$messagesage.error({message:response.data.info,duration:1000});
                        }
                    })
                }
           },
           goDetail(url){
            this.$router.push(url)
           },
           goIndex(){
            location='../index.html'
           }
        },
        mounted(){
            if(document.body.clientWidth < 1500){
                this.collapseChage();
            }
             window.preview1=()=>{
                var img = new Image();
                var file=$('#sendImage')[0].files[0]
                var reader=new FileReader()
                reader.onloadend=(e)=>{
                    var data = e.target.result;
                    img.src=data
                }
                reader.readAsDataURL(file)
                img.onload = ()=> {
                    var w = Math.min(130, img.width);
                    var h = img.height * (w / img.width);
                    var canvas = document.createElement('canvas');
                    var ctx = canvas.getContext('2d');

                    // 设置 canvas 的宽度和高度
                    canvas.width = w;
                    canvas.height = h;

                    // 把图片绘制到 canvas 中
                    ctx.drawImage(img, 0, 0, w, h);
                    // 取出 base64 格式数据
                    this.img = canvas.toDataURL(file.type);
                    $('#userImg').attr('src',this.img)
                }
            }
        }
    }
</script>
<style lang="less" scoped>
        .header_line{
            height: 5px;
    background-image: -webkit-linear-gradient(-360deg,#0ec1f6,#8823de);
    background-image: linear-gradient(90deg,#658690,#8823de);
        }
    .header {
        .headerWrap {
            height: 54px;
            width: 1300px;
            margin: 0 auto;
            .brand{
                width: 250px;
                float: left;
                height: 54px;
                img{
                    width: 149px;
                }
            }
        }
        box-sizing: border-box;
        width: 100%;
        z-index: 1000;
        position:relative;
        height: 59px;
        font-size: 22px;
        background-color: #36455a;
        color: #fff;
        box-shadow: 0 2px 10px 4px rgba(0,0,0,.2);
    background-color: #190629;
        .left{
            width: 600px;
            margin: 0 auto;
            float: left;
            margin-left: 25px;
            .more{
                >img{
                    width: 5%;
                    transition:all 0.3s;
                    transform: rotate(180deg);
                }
                .subWrap{
                    width: 567px;
                    height: 300px;
                    position: absolute;
                    border: 2px solid #595959;
                    border-top: 0;
                    background: #0f0814;
                    opacity: 0.9;
                    .column{
                        >div,li{
                            height: 51px;
                            font-size: 15px;
                            transition:all .3s;
                            list-style-type: none;
                            color: #e0dbdb;
                        }
                        li:hover{
                            color: #a3d3fd;
                            cursor: pointer;
                        }
                        .icon{
                            img{
                                width: 22%;
                                margin-top: 14px;
                            }
                        }
                        .headT{
                            font-weight: bold;
                            font-size: 20px;
                        }
                        width: 187px;
                        float: left;
                        height: 100%;
                        box-sizing: border-box;
                        border-right: 1px solid #777;
                    }
                }
                .nonee{
                    border: none !important;
                }
            }
            >div{
                font-size: 18px;
                color: #777;
                font-weight: 300;
                text-align: center;
                .text{
                transition: all 1s;
                    display: inline-block;
                    &:hover{
                        cursor: pointer;
                        color: #fff;
                    }                    
                }
            }
            .active{
                color: #fff;
            }
        }
    }
    .el-message-box{
        width: 260px !important;
    }
    .collapse-btn{
        float: left;
        padding: 0 21px;
        cursor: pointer;
        line-height: 54px;
    }
    .header .logo{
        display: inline-block;
        width: 24%;
        line-height: 54px;
    }
    .header-right{
        float: left;
        text-align: center;
        width: 205px;
        margin-left: 49px;
        .infoWrap{

            width: 162px;
            height: 51px;
            >div{
                display: inline-block;
                line-height: 51px;
                font-size: 16px;
                &:hover{
                    cursor:pointer;
                }
            }
        }
        .header-user-con{
            display: flex;
            height: 59px;
            align-items: center;
        }
    }
    .btn-fullscreen{
        transform: rotate(45deg);
        margin-right: 5px;
        font-size: 24px;
    }
    .btn-bell, .btn-fullscreen{
        position: relative;
        width: 30px;
        height: 30px;
        text-align: center;
        border-radius: 15px;
        cursor: pointer;
    }
    .btn-bell-badge{
        position: absolute;
        right: 0;
        top: -2px;
        width: 8px;
        height: 8px;
        border-radius: 4px;
        background: #f56c6c;
        color: #fff;
    }
    .btn-bell .el-icon-bell{
        color: #fff;
    }
    .user-name{
        margin-left: 10px;
        &:hover{
            cursor:pointer;
        }
    }
    .user-avator{
        margin-left: 20px;
    }
    .user-avator img{
        display: block;
        width:35px;
        height:35px;
        border-radius: 50%;
    }
    .el-dropdown-link{
        color: #fff;j
        cursor: pointer;
    }
    .el-dropdown-menu__item{
        text-align: center;
    }
    .imgWrapp{
        margin: 0 auto !important;
        width: 130px !important;
        margin-top: 11px !important;
        overflow: hidden !important;
        box-shadow: 0 2px 10px 4px rgba(0, 0, 0, 0.2) !important;
        min-height: 120px;
    }
    .input-group-addonp{
        font-size: 13px;
        margin-top: 23px;
        img{
            cursor: pointer;
            vertical-align: sub;
            box-shadow: 0 2px 10px 4px rgba(0, 0, 0, 0.2);
            margin-left: 10px;
        }
    }
</style>
